﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="create_article.aspx.cs" Inherits="AutoFix.create_article" EnableViewState="true" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="AdditionalPlaceHolder" runat="server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="MessagePlaceHolder" runat="server">
    Fill in the required fields to create an article
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
    <div id="pageActionMessage" runat="server">
       
    </div>    <asp:HiddenField ID="hdnModelSelectedValue" runat="server" />
    <asp:HiddenField ID="hdnModelTypeSelectedValue" runat="server" />
    <asp:HiddenField ID="hdnModelTypeYearSelectedValue" runat="server" />

    <div id="column-left-common">
        <div class="column-section">
            <div class="field-name">Article Type: <span class="asterisk">*</span></div>
            <div class="input-field-holder">
                <asp:DropDownList ID="ddArticleType" runat="server" CssClass="text-box-small" />
            </div>
            <div class="clear"></div>
        </div>
        <div class="column-section">
            <div class="field-name">Article Name: <span class="asterisk">*</span></div>
            <div class="input-field-holder">
                <asp:TextBox ID="txtArticleName" runat="server" CssClass="text-box-small" /><br /><asp:RequiredFieldValidator ID="rqdArticleName" runat="server" ErrorMessage="Article name is required" ControlToValidate="txtArticleName" CssClass="asterisk" ValidationGroup="CreateArticleGroup" />
            </div>
            <div class="clear"></div>
        </div>
        <div class="column-section">
            <div class="field-name">Vehicle Model: <span class="asterisk">*</span></div>
            <div class="input-field-holder">
                <asp:DropDownList ID="ddVehicleModel" runat="server" CssClass="text-box-small" />
            </div>
            <div class="clear"></div>
        </div>
        <div class="column-section">
            <div class="field-name">Model Type: <span class="asterisk">*</span></div>
            <div class="input-field-holder">
                <asp:DropDownList ID="ddVehicleModelType" runat="server" CssClass="text-box-small"  />
            </div>
            <div class="clear"></div>
        </div>
        <div class="column-section">
            <div class="field-name">Model Year: <span class="asterisk">*</span></div>
            <div class="input-field-holder">
                <asp:DropDownList ID="ddVehicleModelYear" runat="server" CssClass="text-box-small" />
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div id="column-right-common">
        <div class="column-section">
            <div class="field-name">Article Image:</div>
            <div class="input-field-holder">
                <asp:FileUpload ID="fleArticleImage" runat="server" CssClass="text-box-small" /><br />
                <span class="text-size-one">Only jpegs are allowed.</span>
            </div>
            <div class="clear"></div>
        </div>
        <div class="column-section">
            <div class="field-name">Tags:</div>
            <div class="input-field-holder">
                <asp:HiddenField ID="hdnSelectedTag" runat="server" Value="" />
                <asp:TextBox ID="txtTags" runat="server" CssClass="text-box-small" /><input type="button" id="btnAddTag" value="Add" class="button-special"/><div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
        <div class="column-section">
            <div class="field-name"></div>
            <div class="input-field-holder">
                <table id="tblTags">
                    <tr></tr>
                </table>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="clear"></div>
    <div class="button-holder">
        <asp:Button ID="btnAddSteps" runat="server" Text="Add Steps" CssClass="button" Visible="false" PostBackUrl="~/add_step.aspx" /><asp:Button ID="btnCreateArticle" runat="server" Text="Save Article" CssClass="button" OnClick="btnCreateArticle_Click"  ValidationGroup="CreateArticleGroup" /><div class="clear"></div>
    </div>
    <script src="js/common.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script type="text/javascript">
        var pageName = "create_article.aspx";

        var availableTags = [];
        function InitializeMethods() {
            $("#btnAddTag").bind("click", AddSelectedTag);
            $("#<%=btnCreateArticle.ClientID%>").click(function () { PopulateNames() });
        }
        function InitiateAjaxCall() {
            var holder = null;
            GetDataViaAjax(holder, pageName, '', BindModelData, "GetAllModels");
            holder = null;
        }
        function SelectModelInfo(data, itemSelected, serverMethod, clientFunction) {
            var data = data;
            var holder = null;
            GetDataViaAjax(holder, pageName, data, clientFunction, serverMethod);
            holder = null;
            data = null;

        }


        function BindModelData(holder) {
            if (holder != null) {
                var listItem = "";
                for (var i = 0; i < holder.length; i++) {
                    listItem += "<option value='" + holder[i].Key + "'>" + holder[i].Value + "</option>"
                }
                var clientID = "#<%=ddVehicleModel.ClientID%>";
                $(clientID).children().remove();
                $(clientID).append(listItem);
                $(clientID).change(function (e) {
                    var data = JSON.stringify({ vehicleModelID: $(this).val() });
                    SelectModelInfo(data, $(this), "GetModelTypes", BindModelDataType);

                    $("#<%=hdnModelSelectedValue.ClientID%>").val($(clientID + " option:selected").val());
                });

                $(clientID).change();
            }
            else {
                $("#<%=pageActionMessage.ClientID%>").text("Fail to load vehicle model");
                $("#<%=pageActionMessage.ClientID%>").attr("class", "error-msg");
            }
        }
        function BindModelDataType(holder) {
            if (holder != null) {
                var listItem = "";
                for (var i = 0; i < holder.length; i++) {
                    listItem += "<option value='" + holder[i].Key + "'>" + holder[i].Value + "</option>"
                }
                var clientID = "#<%=ddVehicleModelType.ClientID%>";
                $(clientID).children().remove();
                $(clientID).append(listItem);
                $(clientID).change(function (e) {
                    var data = JSON.stringify({ vehicleModelTypeID: $(this).val() });
                    SelectModelInfo(data, $(this), "GetModelTypeYears", BindModelYear);

                    $("#<%=hdnModelTypeSelectedValue.ClientID%>").val($(clientID + " option:selected").val());

                });
                $(clientID).change();
            }
            else {
                $("#<%=pageActionMessage.ClientID%>").text("Fail to load vehicle model types");
                $("#<%=pageActionMessage.ClientID%>").attr("class", "error-msg");
            }
        }

        function BindModelYear(holder) {
            if (holder != null) {
                var listItem = "";
                for (var i = 0; i < holder.length; i++) {
                    listItem += "<option value='" + holder[i].Key + "'>" + holder[i].Value + "</option>"
                }
                var clientID = "#<%=ddVehicleModelYear.ClientID%>";
                $(clientID).children().remove();
                $(clientID).append(listItem);

                $("#<%=hdnModelTypeYearSelectedValue.ClientID%>").val($(clientID + " option:selected").val());                
            }

            else {
                $("#<%=pageActionMessage.ClientID%>").text("Fail to load vehicle model type years");
                $("#<%=pageActionMessage.ClientID%>").attr("class", "error-msg");
            }
            
        }
        function BindTags(holder) {
            if (holder != null) {
                for (var i = 0; i < holder.length; i++) {
                    availableTags.push(holder[i].Value);
                }
                $("#<%=txtTags.ClientID%>").autocomplete({
                    source: availableTags
                });
            
            }
            else {

                $("#<%=pageActionMessage.ClientID%>").text("Fail to load vehicle model type years");
                $("#<%=pageActionMessage.ClientID%>").attr("class", "error-msg");
            }
        }
        function PopulateNames() {
            var tagTable = $("#tblTags tbody tr").children();
            var tagNames = "";
            for (var i = 0; i < tagTable.length; i++) {
                var selectedValue = tagTable.eq(i).find("span").text();
                if (selectedValue != null && selectedValue != "") {
                    tagNames += tagTable.eq(i).find("span").text() + ",";
                }
            }
            $("#<%=hdnSelectedTag.ClientID%>").val(tagNames);
        }
        function AddSelectedTag() {
            var tagText = $("#<%=txtTags.ClientID%>").val();
            var hasArrayValue = CheckArrayContainsValue(tagText)           
            var hasValue = CheckTableAlreadyContains(tagText);
          
            for (var i = 0; i < availableTags.length; i++) {
                if (!(hasValue != false)) {
                    if (!(hasArrayValue != false)) {
                        $("#tblTags tr").append("<td><span class='text-size-one-bold'>" + tagText + "</span>&nbsp;<a href='#' class='asterisk removeTag'>[X]</a></td>");
                        availableTags.push(tagText);
                        $(".removeTag").click(function (e) { RemoveItem(e) });
                        break;
                    }

                    if (availableTags[i] == tagText) {
                        $("#tblTags tr").append("<td><span class='text-size-one-bold'>" + availableTags[i] + "</span><a href='#' class='asterisk removeTag'>X</a></td>");
                        $(".removeTag").click(function (e) { RemoveItem(e) });

                        break;
                    }
                }
            }
            if (availableTags.length == 0) {
                $("#tblTags tr").append("<td><span class='text-size-one-bold'>" + tagText + "</span>&nbsp;<a href='#' class='asterisk removeTag'>[X]</a></td>");
                availableTags.push(tagText);
                $(".removeTag").click(function (e) { RemoveItem(e) });
            }
            $("#<%=txtTags.ClientID%>").val("");  
            
        }
        function RemoveItem(e) {
            var currentClickedItem = $(e.target);
            currentClickedItem.parent().remove();
        }
        function CheckArrayContainsValue(tagText) {
            for (var i = 0; i < availableTags.length; i++) {
                if (availableTags[i] == tagText) {
                    return true;
                }
            }
            return false;
        }
        function CheckTableAlreadyContains(tagText) {
            var tagTable = $("#tblTags").children();
            for (var i = 0; i < tagTable.length; i++) {
                if (tagTable.find("tr td span").eq(i).text() == tagText) {
                    return true;
                }
            }
            return false;

        }
        SelectModelInfo('', $(this), "GetTags", BindTags);
        InitiateAjaxCall();
        InitializeMethods();

    </script>
</asp:Content>
